<template>
  <section
    class="pagemaker-editor-inner"
    :class="{'is-footer': _footer}"
    :style="styleInfo()"
  >
    <section ref="innerHeader" class="pagemaker-editor-inner-header" :class="{'focus': focus}" @click="handleHeader">
      <v-header v-if="_header" :option="_headerconfig" />
    </section>
    <!--    :style="{'padding-top':px2rem(_paddingTop)}"-->
    <!--    <section ref="setTop" style="margin-top: 0" />-->
    <section class="pagemaker-editor-inner-body" :style="{paddingBottom: _paddingBottom}">
      <v-layout v-for="(item, index) in _comps" :id="item.id" ref="layout" :key="index" :comps="item.components" />
    </section>

    <section class="pagemaker-editor-inner-footer" :class="{'focus': focus}" @click="handleFooter">
      <v-footer v-if="_footer" :option="_footerconfig" />
    </section>
  </section>
</template>
<script>
import VLayout from './layout.vue'
import VHeader from '@/components/CustomPage/apps/widget/header'
import VFooter from '@/components/CustomPage/apps/widget/footer'
export default {
  name: 'PagemakerEditor',
  components: { VLayout, VHeader, VFooter },
  inject: ['comps', 'pageconfig', 'headerconfig', 'footerconfig', 'getPortListFun', 'getListItemInfo'],
  data() {
    return {
      focus: false
    }
  },
  computed: {
    _comps() {
      return this.comps()
    },
    _pageconfig() {
      return this.pageconfig()
    },
    _headerconfig() {
      return this.headerconfig()
    },
    _footerconfig() {
      return this.footerconfig()
    },
    pagecolor() {
      return this._pageconfig.pagecolor || '#fff'
    },

    linearGradBg() {
      return this._pageconfig.isLinearGradBg ? 'linear-gradient(' + this._pageconfig.direction + ', ' + this._pageconfig.pageBgStartColor + ', ' + this._pageconfig.pageBgEndColor + ')' : (this._pageconfig.pagecolor || '#fff')
      // return this._pageconfig.isLinearGradBg ? this._pageconfig.bgcolorLine : (this.option.bgcolor || '#fff')
    },
    pageimage() {
      return this._pageconfig.pageimage || ''
    },
    _footer() {
      return this._pageconfig.footer
    },
    _header() {
      return this._pageconfig.header
    },
    _paddingTop() {
      return this._pageconfig.paddingTop
    },
    _paddingBottom() {
      return this.px2rem(this._pageconfig.paddingBottom || 0)
    }
  },
  methods: {
    styleInfo() {
      if (this._pageconfig.isLinearGradBg) {
        return { 'background': this.linearGradBg }
      } else {
        const bg = { 'background-color': this.pagecolor, 'background-image': `url(${this.pageimage})` }
        bg['background-position'] = `0 ${this._header ? this.px2rem(88) : 0}`
        this.$nextTick(() => {
          // this.$refs.setTop.style['margin-top'] = ` ${this.px2rem(this._paddingTop)}`
          this.$refs.innerHeader.style['padding-bottom'] = ` ${this.px2rem(this._paddingTop)}`
        })
        return bg
      }
    },
    px2rem(px) {
      return px && (px / 75 * 1 + 'rem') || ''
    },
    addLayout() {
      this.dispatch_event('add-layout')
    },

    handleHeader() {
      this.focus = true
      this.dispatch_event('focus-header')
    },
    async handleFooter() {
      this.focus = true
      await this.getPortListFun(this.getListItemInfo('Footer').id)
      this.dispatch_event('focus-footer')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/position.scss';
@import '@/styles/utility/shadow.scss';
@import '@/styles/utility/center.scss';
@import '@/styles/utility/rem.scss';

.pagemaker-editor-inner {
  position: relative;
  box-sizing: border-box;
  width: 375px;
  margin: 0 auto;
  min-height: 590px;
  background-color: $f9;
  background-repeat: no-repeat !important;
  background-size: 100%;
  border-radius: 0 0 5px 5px;
  box-shadow: #ebedf0 0 4px 12px;

  &.is-footer {
    padding-bottom: rem(196);
  }

  &-header {
    &.focus {
      position: relative;

      &::before {
        content: '';
        @include absolute();
        border: 1px solid $a1;
        z-index: 2;
      }
    }

    &:hover {
      cursor: pointer;
      position: relative;

      &::before {
        border: 1px dotted $a1;
      }
    }
  }

  &-body {
    // padding: 10px;
  }

  &-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;

    &.focus {
      &::before {
        content: '';
        @include absolute();
        border: 1px solid $a1;
        z-index: 2;
      }
    }

    &:hover {
      cursor: pointer;

      &::before {
        border: 1px dotted $a1;
      }
    }
  }
}
</style>
